<template>
<div>
  <a-modal 
    :visible="withdrawDialog" 
    :title="withdrawTitle"
    width="40vw"
    okText="确认撤回"
    cancelText="放弃撤回"
    :maskClosable=false
    @ok="withdrawBtn(true)"
    @cancel="withdrawBtn(false)">
      <a-form>
        <a-form-item label="主题">
          <div style="text-indent: 2em; font-size: 16px">{{subject}}</div>
        </a-form-item>
      </a-form>
    </a-modal>
</div>
  
</template>

<script>
import {message} from "ant-design-vue"
import {getDoAction} from "@/api/approve/approve";
export default {
  name: 'BusinessWithdrawModel',
  props: {
    withdrawDialog: {
      type: Boolean,
      default: false
    },
    withdrawObj: {
      type: Object,
      default(){
        return {}
      }
    }
  },
  data() {
    return {
      withdrawTitle: '',
      subject: ''
    }
  },
  methods: {
    withdrawBtn(sign) {
      if (sign) {
        const {instId, defId, nodeId, btnKey} = this.withdrawObj
        getDoAction({
          instanceId: instId,
          defId,
          started: '',
          data: {},
          action: 'recall',
          extendConf:{ nodeId: btnKey === 'applyTaskList' ? '' : nodeId}
        }).then(res => {
          const {success} = res
          if (success) {
            message.success('撤回成功')
            this.$emit("withdrawDialogChange", sign)
          } else {
            message.error('撤回失败')
          }
        })
      } else {
        this.$emit("withdrawDialogChange", sign)
      }
    },
    getWithdrawTitle() {
      const {btnKey, subject} = this.withdrawObj
      this.subject = subject
      btnKey === 'applyTaskList'? this.withdrawTitle = '撤回申请' : this.withdrawTitle = '撤回办理'
    }
  },
  watch: {
    withdrawDialog: {
      deep: true,
      handler: function (value) {
        value && this.getWithdrawTitle();
      }
    }
  }
}
</script>